{% assign data = section.settings %}
{%- capture fill_container -%}
  {%- if data.is_width_fill -%}
    container_fill
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

{%- capture img_crop -%}
  {%- if data.height != 'auto' -%}
    data-crop-type="height"
  {%- endif -%}
{%- endcapture -%}

{% assign blockId = block_id | default : section.block_id %}

<div class="block_slides" id="block_slides-{{blockId}}">
  <div class="{{fill_container}}">
    <div class="swiper overflow-hidden relative" id="swiper-{{blockId}}">
      <ul class="swiper-wrapper">
        {% for block in section.blocks %}
          <li class="swiper-slide relative">
            {%- if block.btn_text == "" -%}
              <a href="{{block.link | setUrlDataFrom:data_from}}" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:200"></a>
            {%- endif -%}
            <div class="bg_img_box relative">
              {% if block.pc_image.src != '' %}
                <img data-src="{{ block.pc_image.src }}" {{img_crop}} src="{{ 'banner_loading.png' | public_asset_abs_url  }}" alt="{{ block.pc_image.alt }}" class="w-full h-full hidden md:block slide-item-{{data.height}}"/>
              {% else %}
                <img data-src="{{ block.pc_image.src }}" {{img_crop}} src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="{{ block.pc_image.alt }}" class="w-full h-full hidden md:block slide-item-{{data.height}}"/>
              {% endif %}

              {% if block.mobile_image.src != '' or block.pc_image.src != '' %}
                <img data-src="{{ block.mobile_image.src | default:block.pc_image.src  }}" {{img_crop}} src="{{ 'banner_loading.png' | public_asset_abs_url }}" alt="{{ block.mobile_image.alt }}" class="w-full h-full md:hidden slide-item-{{data.height}}"/>
              {% else %}
                <img data-src="{{ block.mobile_image.src | default:block.pc_image.src  }}" {{img_crop}} src="{{ 'banner@2x.png' | public_asset_abs_url }}" alt="{{ block.mobile_image.alt }}" class="w-full h-full md:hidden slide-item-{{data.height}}"/>
              {% endif %}
              <div class="mask absolute top-0 left-0 w-full h-full z-10" style="--bg-color: {{block.mask_color}};--opacity: {{ block.mask | divided_by : 100  }};"></div>
            </div>
            <div class="text_box {{block.text_algin}} {{block.position}} md:absolute left-0 top-0 w-full md:h-full z-20 flex" style="--title-color: {{block.title_color}};--detail-color: {{block.detail_color}};--btn-color: {{block.btn_color}};">
              <div class="text_content">
                {% if block.title != '' %}
                  <div class="text_title public_title">{{block.title}}</div>
                {% endif %}
                {% if block.detail != '' %}
                  <div class="text_detail mt-7">{{block.detail}}</div>
                {% endif %}
                {% if block.btn_text != '' %}
                  <div class="btn_wrap mt-7">
                    <a class="public_btn" href="{{block.link | setUrlDataFrom:data_from}}">{{block.btn_text}}</a>
                  </div>
                {% endif %}
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
      {% if section.blocks.size > 1 %}
        <div class="btn_wrapper flex md:absolute relative md:my-0 my-5 items-center md:justify-start justify-center">
          <div class="swiper-button-prev" id="swiper-button-prev-{{blockId}}">
            {% include 'svg',svg: 'arrow_left_icon' %}
          </div>
          <div class="swiper-pagination relative" id="swiper-pagination-{{blockId}}"></div>
          <div class="swiper-button-next" id="swiper-button-next-{{blockId}}">
            {% include 'svg',svg: 'arrow_right_icon' %}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>

<script>
  (function() {

    {%- capture autoplay -%}
      {%- if data.is_play -%}
        {
          delay: Number('{{data.duration}}') * 1000
        }
      {%- else -%}
        false
      {%- endif -%}
    {%- endcapture -%}
    let blockId = {{blockId}};
    let blocksSize = {{section.blocks.size}};

    let options = {
      loop: blocksSize > 1,
      autoplay: {{autoplay}},{% if data.height == 'auto' %}autoHeight : true,{% endif %}
    }

    if (blocksSize > 1) {
      options.pagination = {
        el: `#swiper-pagination-${blockId}`,
        clickable: true
      }
      options.navigation = {
        nextEl: `#swiper-button-next-{{blockId}}`,
        prevEl: `#swiper-button-prev-{{blockId}}`
      }
    }

    let swiper = new Swiper(`#swiper-${blockId}`, options);

    var block = {{section.blocks|json}};
    if (block.length) {
      moi.addEvent('lazyImg', function(event) {

        if (event.params && block.findIndex(item => {
          return item.pc_image.src == event.params || item['mobile_image'].src == event.params
        }) > -1) {
          swiper.updateAutoHeight()
        }
      })
    }

    $(`#block_slides-{{blockId}}`).parent().css('margin-bottom', `{{data.margin_bottom}}px`);

  })()
</script>


{% schema %}
  {
    "tag": "",
    "class": "block_slides",
    "is_global": false,
    "name": {
      "zh_CN": "轮播图",
      "en_US": "Slideshow"
    },
    "max_blocks": 10,
    "blocks": [
      {
        "name": {
          "zh_CN": "轮播图片",
          "en_US": "Slide image"
        },
        "type": "slide-item",
        "settings": [
          {
            "type": "card_image",
            "label": {
              "zh_CN": "pc端图片",
              "en_US": "Image on PC"
            },
            "default": {
              "src": "",
              "alt": ""
            },
            "info": {
              "zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420，自适应-1920*1200px",
              "en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420,adaptive -1920*1200px"
            },
            "id": "pc_image"
          },
          {
            "type": "card_image",
            "label": {
              "zh_CN": "移动端图片",
              "en_US": "Mobile image"
            },
            "default": {
              "src": "",
              "alt": ""
            },
            "info": {
              "zh_CN": "尺寸建议：1242*1242px",
              "en_US": "Size suggested: 1242*1242px"
            },
            "id": "mobile_image"
          },
          {
            "type": "card_select",
            "label": {
              "zh_CN": "文字对齐方式",
              "en_US": "Text alignment"
            },
            "default": "text-center",
            "id": "text_algin",
            "option": [
              {
                "label": {
                  "zh_CN": "居左",
                  "en_US": "To the left"
                },
                "value": "text-left"
              }, {
                "label": {
                  "zh_CN": "居中",
                  "en_US": "In the center"
                },
                "value": "text-center"
              }, {
                "label": {
                  "zh_CN": "居右",
                  "en_US": "To the right"
                },
                "value": "text-right"
              }
            ]
          },
          {
            "type": "card_select",
            "label": {
              "zh_CN": "文本布局方式",
              "en_US": "Text layout"
            },
            "default": "center-center",
            "id": "position",
            "option": [
              {
                "label": {
                  "zh_CN": "上左",
                  "en_US": "Up left"
                },
                "value": "top-left"
              },
              {
                "label": {
                  "zh_CN": "上中",
                  "en_US": "Upper middle"
                },
                "value": "top-center"
              },
              {
                "label": {
                  "zh_CN": "上右",
                  "en_US": "Top right"
                },
                "value": "top-right"
              },
              {
                "label": {
                  "zh_CN": "中左",
                  "en_US": "Center-left"
                },
                "value": "center-left"
              }, {
                "label": {
                  "zh_CN": "中中",
                  "en_US": "Zhong zhong"
                },
                "value": "center-center"
              }, {
                "label": {
                  "zh_CN": "中右",
                  "en_US": "Center-right"
                },
                "value": "center-right"
              }, {
                "label": {
                  "zh_CN": "下左",
                  "en_US": "Lower left"
                },
                "value": "bottom-left"
              }, {
                "label": {
                  "zh_CN": "下中",
                  "en_US": "Lower middle"
                },
                "value": "bottom-center"
              }, {
                "label": {
                  "zh_CN": "下右",
                  "en_US": "Down right"
                },
                "value": "bottom-right"
              }
            ]
          }, {
            "type": "card_input",
            "label": {
              "zh_CN": "标题",
              "en_US": "Title"
            },
            "id": "title",
            "default": ""
          }, {
            "type": "card_text_editor",
            "label": {
              "zh_CN": "简短描述",
              "en_US": "Short description"
            },
            "id": "detail",
            "default": ""
          }, {
            "type": "card_input",
            "label": {
              "zh_CN": "按钮文字",
              "en_US": "Button text"
            },
            "id": "btn_text",
            "default": ""
          }, {
            "type": "card_page_link",
            "label": {
              "zh_CN": "跳转链接",
              "en_US": "Jump links"
            },
            "default": {
              "type": "",
              "title": "",
              "url": ""
            },
            "id": "link"
          }, {
            "type": "card_header",
            "label": {
              "zh_CN": "颜色设置",
              "en_US": "Color Settings"
            }
          }, {
            "type": "card_color",
            "id": "title_color",
            "label": {
              "zh_CN": "标题颜色",
              "en_US": "Header color"
            },
            "default": "#000"
          }, {
            "type": "card_color",
            "id": "detail_color",
            "label": {
              "zh_CN": "描述颜色",
              "en_US": "Describe color"
            },
            "default": "#000"
          }, {
            "type": "card_color",
            "id": "btn_color",
            "label": {
              "zh_CN": "按钮颜色",
              "en_US": "Button color"
            },
            "default": "#000"
          }, {
            "type": "card_slider",
            "label": {
              "zh_CN": "蒙层透明度",
              "en_US": "Mask transparency"
            },
            "id": "mask",
            "max": "100",
            "min": "0",
            "default": "0"
          }, {
            "type": "card_color",
            "label": {
              "zh_CN": "蒙层颜色",
              "en_US": "Mask color"
            },
            "id": "mask_color",
            "default": "#000"
          }
        ]
      }
    ],
    "settings": [
      {
        "type": "card_header",
        "label": {
          "zh_CN": "设置",
          "en_US": "Settings"
        }
      },
      {
        "type": "card_input_number",
        "max": 200,
        "min": 0,
        "id": "margin_bottom",
        "label": {
          "zh_CN": "下边距",
          "en_US": "Bottom margin"
        },
        "default": 80
      },
      {
        "type": "card_switch",
        "label": {
          "zh_CN": "自动轮播",
          "en_US": "Automatic slide"
        },
        "id": "is_play",
        "default": true
      },
      {
        "type": "card_slider",
        "label": {
          "zh_CN": "轮播时间(s)",
          "en_US": "Slide time (s)"
        },
        "default": "3",
        "max": 5,
        "min": 1,
        "id": "duration"
      }, {
        "type": "card_select",
        "label": {
          "zh_CN": "图片高度",
          "en_US": "Image height"
        },
        "id": "height",
        "option": [
          {
            "label": {
              "zh_CN": "大",
              "en_US": "Big"
            },
            "value": "big"
          }, {
            "label": {
              "zh_CN": "中",
              "en_US": "Middle"
            },
            "value": "center"
          }, {
            "label": {
              "zh_CN": "小",
              "en_US": "Small"
            },
            "value": "small"
          }, {
            "label": {
              "zh_CN": "自适应",
              "en_US": "Adaptive"
            },
            "value": "auto"
          }
        ],
        "default": "small"
      }, {
        "type": "card_switch",
        "label": {
          "zh_CN": "宽度铺满",
          "en_US": "Spread the width"
        },
        "id": "is_width_fill",
        "default": true
      }, {
        "type": "card_header",
        "label": {
          "zh_CN": "内容",
          "en_US": "Content"
        }
      }
    ],
    "default": {
      "settings": {
        "margin_bottom": 0,
        "is_play": false,
        "duration": "3",
        "height": "big",
        "is_width_fill": true
      },
      "blocks": [
        {
          "pc_image": {
            "src": "",
            "alt": ""
          },
          "mobile_image": {
            "src": "",
            "alt": ""
          },
          "title": "Quality, you can trust.",
          "detail": "Tell your brand's story through images. They can capture your audience's attention and communicate your message ",
          "btn_text": "SHOP NOW",
          "link": {
            "type": "",
            "title": "",
            "url": ""
          },
          "text_algin": "text-left",
          "position": "center-left",
          "title_color": "#000",
          "detail_color": "#000",
          "btn_color": "#000",
          "mask": "0",
          "mask_color": "#000",
          "block_type": "slide-item"
        }, {
          "pc_image": {
            "src": "",
            "alt": ""
          },
          "mobile_image": {
            "src": "",
            "alt": ""
          },
          "title": "Quality, you can trust.",
          "detail": "Tell your brand's story through images. They can capture your audience's attention and communicate your message ",
          "btn_text": "SHOP NOW",
          "link": {
            "type": "",
            "title": "",
            "url": ""
          },
          "text_algin": "text-center",
          "position": "center-center",
          "title_color": "#000",
          "detail_color": "#000",
          "btn_color": "#000",
          "mask": "0",
          "mask_color": "#000",
          "block_type": "slide-item"
        }
      ]
    },
    "icon": "icon-lunbotu"
  }
{% endschema %}